import Backdrop from "@lib/Backdrop";
import type { RouteDefinition } from "@solidjs/router";
import { createEffect, createSignal, on } from "solid-js";

//@ts-ignore
import { fLoading, Spinner } from "@lib/index";
import Loading from "@lib/Spinner/loading";

const BackdropDemo = () => {
  const [show, setShow] = createSignal(false);

  const click = () => setShow((v) => !v);

  const loading = fLoading;

  createEffect(on(show, (v) => console.log("show", v)));

  return (
    <div>
      <button type="button" class="btn btn-primary" onClick={click}>
        click!
      </button>
      <hr></hr>
      <div
        style={{
          width: "200px",
          height: "200px",
          "background-color": "red",
        }}
      >
        <Loading
          show={show()}
          spinner={
            <div class="d-flex flex-row" style={{"align-items": 'center'}}>
              <Spinner sm color="danger" classes={['m-1']}></Spinner>
              <strong>Loading...</strong>
            </div>
          }
        >
          <div class="text-center">
            <button type="button" class="btn btn-primary">
              click 1
            </button>
          </div>
        </Loading>
      </div>

      <hr></hr>
      <div
        style={{
          width: "200px",
          height: "200px",
          "background-color": "red",
        }}
      >
        <Loading show={show()}>
          <div class="text-center">
            <button type="button" class="btn btn-primary">
              click 2
            </button>
          </div>
        </Loading>
      </div>
    </div>
  );
};

export const BackdropDemoRoute: RouteDefinition = {
  path: "/backdrop",
  component: BackdropDemo,
};

export default BackdropDemo;
